<template>
  <div class="product_batches">
    <one-title title="产品批次管理" @refreshData="refresh"></one-title>
    <mes-search :searchList="searchList"
                ref="mesSearch"
                :searchResult="searchResult"
                @searchInfo="_info">
    </mes-search>
    <div class="table_container">
      <el-table
        border
        stripe
        :data="listData.list"
        v-loading="isLoading"
        @sort-change="_sort"
        style="width: 100%">
        <el-table-column
          prop="batchNumber"
          label="批次号"
          align="center"
          sortable="custom"
          min-width="200"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="产品名称"
          min-width="200"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="产品型号"
          min-width="200"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="unitedNumber"
          label="统一号"
          min-width="200"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="batchCreateData"
          label="生成时间"
          min-width="200"
          align="center"
          :resizable="false"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
  </div>
</template>

<script>
export default {
  name: 'ProductBatches',
  data() {
    return {
      isLoading: true, // 数据加载
      searchResult: NaN, // 搜索结果数
      searchData: {}, // 搜索的字段
      sortData: {}, // 排序
    }
  },
  components: {
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.productBatches.listData
    },
    // 页面刷新
    isRefresh() {
      return this.$store.state.productBatches.isRefresh
    },
    // 搜索字段
    searchList() {
      let searchList = [
        {
          label: '批次号',
          value: '',
          name: 'batchNumber',
          type: 'input'
        },
        {
          label: '产品名称',
          value: '',
          name: 'name',
          type: 'input'
        },
        {
          label: '产品型号',
          value: '',
          name: 'number',
          type: 'input'
        },
        {
          label: '统一号',
          value: '',
          name: 'unitedNumber',
          type: 'input'
        },
        {
          label: '生成时间',
          value: '',
          name: 'batchCreateData',
          type: 'date'
        }]
      return searchList
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 页面初始化方法
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/product/product/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : 15,
          query: {
            delFlag: 0
          }
        },
        module: 'productBatches',
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    }
  }
}
</script>

<style scoped lang="less">

</style>
